<template>
  <div class="page">
    <!-- 轮播图 -->
    <div class="pic">
      <van-swipe @change="onChange" :autoplay="3000">
        <van-swipe-item v-for="(item, index) in listsimg" :key="index">
          <img :src="item" alt="" />
        </van-swipe-item>

        <template #indicator>
          <div class="custom-indicator">
            {{ current + 1 }}/{{ listsimg.length }}
          </div>
        </template>
      </van-swipe>
      <div class="go" @click="back">
        <span></span>
      </div>
    </div>

    <div class="price">
      <div class="left">
        <span
          ><i>￥</i>{{ lists.num }}<del>￥{{ lists.delnum }}</del></span
        >
      </div>
      <div class="right">
        <div class="word">距结束还有</div>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.days }}</span
            >天 <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
        <div class="bottom"></div>
      </div>
    </div>

    <div class="date">
      <div class="title">
        <h3>
          {{ lists.title }}
        </h3>
      </div>
      <div class="mid">
        <div class="ward">
          <i>{{ lists.span }}</i>
        </div>
        <div class="money">
          <span><i>￥</i>{{ lists.num }}</span>
          <div class="box">
            <div>
              出发地
              <p>广州</p>
            </div>
            <div>
              目的地
              <p>{{ lists.go }}</p>
            </div>
            <div>
              服务商
              <p>广州广之旅国际旅行社股份有限公司</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-cell title="选择出游时间" :value="date" @click="show = true" ref="times"/>
    <van-calendar v-model="show" @confirm="onConfirm" />

    <div class="low">
      <van-tabs
        v-model="active"
        scrollspy
        sticky
        title-active-color="#ffAB00"
        color="#ffAB00"
      >
        <van-tab title="产品特色">
          <van-divider
            :style="{ color: '#000', borderColor: '#000', padding: '0 100px' }"
          >
            <b>产品特色</b>
          </van-divider>
          <div class="item">
            <p v-for="(e, i) in liststese" :key="i">
              {{ e }}
            </p>
          </div>
          <van-divider
            :style="{ color: '#000', borderColor: '#000', padding: '0 100px' }"
          >
            <b>行程概要</b>
          </van-divider>
          <div class="itemz">
            <span><i></i>景点：{{ lists.spot }}</span>
            <span><i></i>用餐：{{ lists.meals }}</span>
            <span><i></i>购物：{{ lists.shopping }}</span>
          </div>
        </van-tab>
        <van-tab title="行程介绍">
          <van-divider
            :style="{ color: '#000', borderColor: '#000', padding: '0 100px' }"
          >
            <b>行程介绍</b>
          </van-divider>
          <div class="item2">
            <p>出发日期：2022-11-13</p>
            <p>套餐编号：GZLGZ0YG2SK2211130107CH</p>
            <h3>{{ lists.time }}</h3>
            <h5>汽车</h5>
            <h6>广州-从化吕田桂峰村</h6>
            <p>时长：约2小时</p>
            <p>
              早上于广州市区指定地点
              指定时间(见行程备注)集合，乘车前往从化吕田桂峰村。
            </p>
            <h3>景点 游览 <span>吕田桂峰村</span></h3>
            <h6>
              【桂峰村】：桂峰山主峰有一溪流直贯而下，水质清澈，适合进行溯溪探险活动，当披荆斩棘穿越丛林到达顶峰，从山顶可以饱览山下优美的田园风光。
            </h6>
            <b>吕田桂峰村</b>
            <h6>
              广州市从化区吕田镇桂峰村，每到秋冬季节，桂峰村一片柿子林的枝头挂满了晶莹剔透红澄澄十分诱人的果实。一眼望去山脚下是橙红色的一片又一片，场面十分喜人。
            </h6>
            <h3>汽车</h3>
            <h6>米埗小镇-广州</h6>
            <p>
              早上于广州市区指定地点
              指定时间(见行程备注)集合，乘车前往从化吕田桂峰村。
            </p>
            <h3>餐饮</h3>
            <h6>早餐：自理</h6>
            <h6>午餐：特色餐</h6>
            <h6>晚餐：自理</h6>
            <h3>住宿</h3>
            <h6>不含</h6>
          </div>
        </van-tab>
        <van-tab title="费用说明">
          <van-divider
            :style="{ color: '#000', borderColor: '#000', padding: '0 100px' }"
          >
            <b>费用说明</b>
          </van-divider>
          <div class="item3">
            <h3>费用包含</h3>
            <div class="itemy">
              <span
                >餐品:
                <p>餐饮风味、用餐条件各地有一定的差异，请见谅。</p></span
              >
              <span
                >门票:
                <p>行程中所列景点首道大门票。</p></span
              >
              <span
                >保险:
                <p>
                  强烈建议出行游客购买个人旅游意外保险。具体保险险种请在报名时向销售人员咨询并购买，出行时请将该保单资料随身携带。在出现旅游意外时请及时联系销售人员说明情况并保管好相关票据。
                </p></span
              >
            </div>
            <h3>预订说明</h3>
            <p>
              1.为保护客人您的权益，请勿将团款转至广之旅销售人员个人账户（微信、支付宝、银行卡等）。如有违规引导，请拨打广之旅【财务举报专线】：020-36716908。
            </p>
            <p>
              2.行程实际出行中，导游可能会根据天气、交通等情况，对行程进行适当调整（如调整景点游览顺序等），以确保行程顺利进行，如遇恶劣天气或其它不可抗力因素造成景点未能正常游玩，导游经与客人协商后可根据实际情况取消或更换该景点，敬请谅解。
            </p>
            <p>
              3.出游过程中，如遇不可抗力因素造成景点未能正常游玩，导游经与客人协商后可根据实际情况取消或更换该景点，或由导游在现场按旅游产品中的旅行社门票采购价退还费用，退费不以景区挂牌价为准，敬请谅解。
            </p>
            <p>
              4.旅行社可以根据实际情况，在保证行程景点游览不变且经与客人协商一致的前提下，对景点的游览顺序作合理的调整，客人对此表示理解。
            </p>
            <p>
              5.行程中途经的休息站、加油站、公共卫生间等地停留仅供休息和方便之用，其自带的商店非旅行社指定的购物场所，旅游者在此购物为个人自主行为；公园、博物馆、展览馆、体验馆、制作工场附设商品销售为景区设施，仅供了解当地特色文化之用，旅游者在此购物为个人自主行为，旅游者在以上所列场所因购物产生的纠纷与旅行社无关。
            </p>
            <p>
              6.请您在预订时务必提供准确、完整的信息（姓名、性别、证件号码、国籍、联系方式、是否成人或儿童等），以免产生预订错误，影响出行。如因客人提供错误个人信息而造成损失，应由客人自行承担因此产生的全部损失。
            </p>
            <p>
              7.出游过程中，如遇不可抗力因素造成景点未能正常游玩，导游经与客人协商后可根据实际情况取消或更换该景点，或由导游在现场按旅游产品中的门票价退还费用，退费不以景区挂牌价为准，敬请谅解。
            </p>
            <p>
              8.客人同意旅行社无偿使用本行程中领队/旅行社工作人员所拍摄的集体照片或个人照片，旅行社承诺该类照片仅用于旅行社及关联公司进行相关的合法宣传推广，不作任何损害客人合法权益的行为。
            </p>
          </div>
        </van-tab>
        <van-tab title="预定须知">
          <van-divider
            :style="{ color: '#000', borderColor: '#000', padding: '0 100px' }"
          >
            <b>注意事项</b>
          </van-divider>
          <div class="item4">
            <p>
              1、请在提交订单前再次核对订单内容及资料等相关信息，最终团费价格以支付时为准。
            </p>
            <p>
              2、旅客信息请务必填写正确，因客人原因填写错误产生的责任及费用，需由客人自行承担；
            </p>
            <p>
              3、据新修订的《居民身份证法》规定，一代居民身份证已于2013年1月1日起停止使用，请使用二代居民身份证，以便顺利出游；
            </p>
            <p>
              4、我司常规旅游线路不接受未成年人单独参团，必须有成年人同行（广东省内的旅游线路则可接受15-18周岁未成年人单独参团；夏令营，研学产品可以接受未成年人单独参团）；
            </p>
            <p>5、因接待条件有限，不接受孕妇及80周岁以上(含80周岁)人士报名；</p>
            <p>
              6、报名出境旅游，请务必检查护照的有效期至少为（回程日期+6个月）以上和两页以上空白签证页，特别产品可能要求的有效期更长，请务必咨询客服。
            </p>
            <p>
              7、产品名称含有“等待确认”或预订的是单项代订服务产品（例如：代订酒店、交通等），请等待我司通知确认能否预订成功，若我司通知未能成功预订，则订单不生效，我司将退还客人所支付的款项，不另作任何赔偿。
            </p>
            <p>
              8.客人同意旅行社无偿使用本行程中领队/旅行社工作人员所拍摄的集体照片或个人照片，旅行社承诺该类照片仅用于旅行社及关联公司进行相关的合法宣传推广，不作任何损害客人合法权益的行为。
            </p>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <footer>
      <div class="left1">
        <div class="item">
          <router-link tag="div" to="/home" class="img">
            <img src="../assets/img/shouye2.png" alt="" />
          </router-link>
          <div class="img" @click="like">
            <img v-show="!lists.like" src="../assets/img/shoucang1.png" alt="" />
            <img v-show="lists.like" src="../assets/img/shoucang.png" alt="" />
          </div>
          <div class="img">
            <img src="../assets/img/fengxiang.png" alt="" />
            <van-cell @click="showShare = true" />
            <van-share-sheet
              v-model="showShare"
              title="立即分享给好友"
              :options="options"
              @select="onSelect"
            />
          </div>
        </div>
      </div>
      <div
        @click="pay"
        class="right1"
      >
        立即预定
      </div>
    </footer>

    <main @click="top">
      <img src="../assets/img/top.png" alt="" />
    </main>
  </div>
</template>

<script>
export default {
  props: ["CoList"],
  data() {
    return {
      current: 0,
      time: 30 * 60 * 60 * 1000,
      flag: false,
      showShare: false,
      active: 0,
      lists: null,
      lists2: [],
      listsimg: null,
      liststese: null,
      footprint: [],
      date: "",
      tiems:'',
      show: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    //去支付
    pay(){
      if(this.tiems){
        this.$router.push({
        path:'/pay',
        query:{
            lists:this.lists,
            tiems:this.tiems
           }
          })
      }else{
        this.$toast("请选择出游日期")
      }
    },
    onChange(index) {
      this.current = index;
    },
    onSelect(option) {
      this.$toast(option.name);
      this.showShare = false;
    },
    //选择时间
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    //选择时间
    onConfirm(date) {
      this.show = false;
      console.log(this.$refs);
      console.log(this.$refs.times.childNodes[1].innerText);

      setTimeout(()=>{
        this.tiems = this.$refs.times.childNodes[1].innerText;
      },10)
      
      console.log(this.tiems);

      this.date = this.formatDate(date);
    },
    //回到顶部
    top() {
      // window.scroll(0,0);
      const upRoll = setInterval(() => {
        const top = document.documentElement.scrollTop;
        const speed = Math.ceil(top / 10); //每次滚动多少
        if (document.documentElement.scrollTop > 0) {
          document.documentElement.scrollTop -= speed; //不在顶部 每次滚动到的位置
        } else {
          clearInterval(upRoll); //回到顶部清除定时器
        }
      }, 20);
    },
    //返回
    back() {
      this.$router.go(-1);
    },
    getDataFun(id) {
      let index = this.CoList.findIndex((item) => item.id == id);
      this.lists = this.CoList[index];
      console.log(this.lists);

      this.listsimg = this.lists.img; //轮播图
      this.liststese = this.lists.tese; //文本
    },
    //收藏
    like() {
      if (window.localStorage.token) {
        this.flag = !this.flag;
        this.lists.like = !this.lists.like;
        this.$emit('like',this.lists)
        // this.lists2.push(this.lists);
        // window.localStorage.setItem("like", JSON.stringify(this.lists2));
      } else {
        this.$router.push("login");
      }
    },
  },
  created() {
    //足迹
    this.footprint = JSON.parse(window.localStorage.getItem("footprint"));
    this.getDataFun(this.$route.query.id);
    if (window.localStorage.getItem("footprint")) {
      this.footprint = JSON.parse(window.localStorage.getItem("footprint"));
    } else {
      this.footprint = [];
    }
    console.log(this.CoList);
    // //收藏
    // if (window.localStorage.getItem("like")) {
    //   this.lists2 = JSON.parse(window.localStorage.getItem("like"));
    // } else {
    //   this.lists2 = [];
    // }
  },
  beforeDestroy() {
    //足迹
    if (!this.footprint.length) {
      this.footprint.push(this.lists);
      window.localStorage.setItem("footprint", JSON.stringify(this.footprint));
    } else {
      let index = this.footprint.findIndex((item) => item.id == this.lists.id);
      if (index == -1) {
        this.footprint.push(this.lists);
        window.localStorage.setItem(
          "footprint",
          JSON.stringify(this.footprint)
        );
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  .pic {
    width: 100%;
    height: 250px;
    .go {
      background-color: rgba(255, 255, 255, 0.6);
      padding: 4px;
      position: absolute;
      top: 8px;
      left: 6px;
      border-radius: 50%;
      span {
        display: block;
        width: 15px;
        height: 15px;
        background: url(../assets/img/fanhui.png) no-repeat;
        background-size: 100%;
      }
    }
    img {
      width: 100%;
    }
  }
  .price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      background: #f6d30a;
      display: flex;
      flex: 1;
      height: 52px;
      line-height: 52px;
      span {
        display: block;
        color: #ee0a24;
        font-size: 30px;
        font-weight: bold;
        margin-left: 16px;
        i {
          font-style: normal;
          font-size: 14px;
        }
        del {
          font-style: normal;
          font-size: 14px;
        }
      }
    }
    .right {
      background: #ee0a24;
      color: #fff;
      position: relative;
      &::before {
        content: "";
        display: block;
        border-top: 36px solid #f6d30a;
        border-left: 8px solid #f6d30a;
        border-right: 18px solid #ee0a24;
        border-bottom: 16px solid #ee0a24;
        position: absolute;
        top: 0;
        left: -26px;
      }
      .word {
        text-align: center;
        font-size: 12px;
        height: 20px;
      }
      ::v-deep .van-count-down {
        padding: 0 10px;
        box-sizing: border-box;
        color: #fff;
        font-size: 12px;
        .colon {
          display: inline-block;
          color: #fff;
        }
        .block {
          display: inline-block;
          width: 22px;
          color: #000;
          font-size: 12px;
          text-align: center;
          background-color: #fff;
        }
      }
      .bottom {
        background: #ee0a24;
        height: 12px;
      }
    }
  }
  .date {
    padding: 12px 16px;
    border-bottom: 10px solid #f5f5f5;
    .title {
      h3 {
        font-size: 16px;
      }
    }
    .mid {
      .ward {
        display: flex;
        padding: 6px 0;
        i {
          font-style: normal;
          display: block;
          font-size: 12px;
          padding: 2px 6px;
          background: #f5f5f5;
          margin-right: 8px;
          border-radius: 8px;
          color: #888;
        }
      }
      .money {
        display: flex;
        flex-direction: column;
        span {
          font-size: 28px;
          color: #f55;
          font-weight: 600;
          i {
            font-style: normal;
            font-weight: normal;
            font-size: 16px;
          }
        }
        .box {
          display: flex;
          flex-direction: column;
          & > div {
            display: flex;
            color: #999;
            font-size: 12px;
            padding: 4px 0;
            p {
              color: #000;
              margin-left: 20px;
            }
          }
        }
      }
    }
  }
  ::v-deep .van-cell {
    padding: 6px 0;
    height: 52px;
    line-height: 46px;
    box-sizing: content-box;
    &::before {
      position: absolute;
      top: 6px;
      right: 186px;
      content: "";
      display: block;
      border-top: 36px solid #ee0a24;
      border-left: 8px solid #ee0a24;
      border-right: 20px solid #ffea4c;
      border-bottom: 16px solid #ffea4c;
    }
  }
  ::v-deep .van-cell__title {
    color: #fff;
    background: #ee0a24;
    padding: 6px;
  }
  ::v-deep .van-cell__value {
    font-size: 20px;
    background: linear-gradient(#ffe949, #ffea4d);
    color: #ee0a24;
    padding-right: 10px;
    // line-height: 36px;
  }
  .low {
    ::v-deep .van-tab--active {
      font-weight: bold;
      font-size: 16px;
    }
    .item {
      padding: 0 16px 16px 16px;
      border-bottom: 10px solid #f5f5f5;
      p {
        font-size: 13px;
        color: #434343;
        line-height: 2;
      }
    }
    .itemz {
      padding: 0 16px 16px 16px;
      border-bottom: 10px solid #f5f5f5;
      display: flex;
      flex-direction: column;
      span {
        display: flex;
        align-items: center;
        color: #666;
        font-size: 13px;
        padding: 4px 0;
        &:nth-child(2) i {
          background-position: -430px -236px;
        }
        &:nth-child(3) i {
          background-position: -430px -297px;
        }
        i {
          display: inline-block;
          width: 18px;
          height: 18px;
          background: url(../assets/img/sprite.png) no-repeat -430px -340px;
          background-size: 450px;
          margin-right: 16px;
        }
      }
    }
    .item2 {
      padding: 0 16px 16px 16px;
      border-bottom: 10px solid #f5f5f5;
      p {
        font-size: 13px;
        padding: 4px 0;
        color: #999;
      }
      h3 {
        padding: 6px 0;
        span {
          color: #0099ff;
        }
      }
      h5 {
        padding: 6px 0;
      }
      h6 {
        font-size: 14px;
        font-weight: normal;
        color: #666;
      }
      b {
        display: block;
        color: #0099ff;
        padding: 6px 0;
      }
    }
    .item3 {
      padding: 0 16px 16px 16px;
      border-bottom: 10px solid #f5f5f5;
      h3 {
        padding: 6px 0;
      }
      p {
        font-size: 14px;
        color: #666;
        margin-bottom: 4px;
      }
      .itemy {
        background: #fafafa;
        span {
          padding: 6px 0;
          display: flex;
          flex-direction: column;
          p {
            padding: 2px 0 2px 34px;
            font-size: 13px;
            color: #999;
          }
        }
      }
    }
    .item4 {
      padding: 0 16px 40px 16px;
      p {
        font-size: 13px;
        color: #434343;
        line-height: 2;
      }
    }
  }
  footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    background: #fff;
    .left1 {
      display: flex;
      .item {
        display: flex;
        padding: 10px 0;
        .img {
          width: 20px;
          height: 20px;
          margin: 0 20px;
          &:last-of-type {
            width: 19px;
            height: 19px;
          }
          img {
            width: 100%;
          }
        }
      }
    }
    .right1 {
      padding: 10px 20px;
      background: #ee0a24;
      color: #fff;
      border-radius: 30px;
      margin-right: 10px;
    }
  }
  main {
    width: 20px;
    height: 20px;
    padding: 8px;
    background: #fff;
    border-radius: 50%;
    position: fixed;
    bottom: 70px;
    right: 14px;
    img {
      width: 100%;
    }
  }
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
  }
}
</style>
